<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scree Share Offer</title>
</head>
<body>
<button onclick="createOffer()" >点击开始共享</button>

当前共享的区域：<br/>
<video id="localVideo" autoplay width="50%" height="auto"></video>

<br/>
ANSWER：<br/>
<textarea id="answer" onchange="setAnswer()"></textarea>
<br/>
ANSWER CANDIDATE:<br>
<textarea id="answer_candidate" onchange="setAnswerCandidate()"></textarea>

远程共享的区域：<br/>
<video id="remoteVideo" autoplay width="50%" height="auto"></video>


<script>
    //1.创建PC
    //2。获取流
    //3. 流添加到PC，创建offer
    //4。监听 stream（流）

    let pc = new RTCPeerConnection();
    let localStream = null;

    //远程流
    pc.onaddstream = function (e){
        document.getElementById('remoteVideo').srcObject = e.stream;
    }

    //候选者 访问对向
    pc.onicecandidate = function (e){
        if(e.candidate){
            console.log('offer candidate',JSON.stringify(e.candidate))
        }
    }

    function createOffer(){
        navigator.mediaDevices.getDisplayMedia().then(stream=>{
            document.getElementById('localVideo').srcObject = stream;
            localStream = stream;

            stream.getTracks().forEach(track=>{
                pc.addTrack(track,stream);
            })

            pc.createOffer().then(offer=>{
                console.log('offer',JSON.stringify(offer.sdp) );
                pc.setLocalDescription(offer);
            });

        });
    }

    function setAnswer(){
        let  answer = JSON.parse(document.getElementById('answer').value);
        pc.setRemoteDescription({'type':'answer','sdp':answer})
    }

    function setAnswerCandidate(){
        let  answerCandidate = JSON.parse(document.getElementById('answer_candidate').value);
        pc.addIceCandidate(answerCandidate)
    }



</script>
</body>
</html>